import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/DailyBill'
const Month = () => {

    // 时间选择器可见性控制
    const [visible, setVisible] = useState(false)
    // 账单时间
    const [currentMonth, setCurrentMonth] = useState(() => {
        return dayjs().format('YYYY-MM')
    })
    // 当前月份对应的账单列表
    const [currentMonthList, setCurrentMonthList] = useState([])
    //时间选择器确定回调
    const dateConfirm = (date) => {
        setVisible(false)
        const month = dayjs(date).format('YYYY-MM')
        const currentMonthList = monthGroup[month]
        if (currentMonthList) {
            setCurrentMonthList(currentMonthList)
        } 

        setCurrentMonth(month)
    }

    // 从redux拿数据
    const billList = useSelector(state => state.bill.billList)

    // 数据二次处理根据月份分类billList（useMemo）
    const monthGroup = useMemo(() => {
        return _.groupBy(billList, item => dayjs(item.date).format('YYYY-MM'))
    }, [billList])

    useEffect(() => {
        const list = monthGroup[dayjs().format('YYYY-MM')]
     
        if (list) {

            setCurrentMonthList(list)
        } 
    }, [monthGroup])
    //数据二次处理根据当前月份账单计算当前月的支出和结余（useMemo）
    const monthResult = useMemo(() => {
        // 支出
        const pay = currentMonthList.filter(item => item.type === 'pay').reduce((pre, nex) => pre + nex.money, 0)
        //收入
        const income = currentMonthList.filter(item => item.type === 'income').reduce((pre, nex) => pre + nex.money, 0)
        return {
            pay,
            income,
            total: pay + income
        }
    }, [currentMonthList])


    // 数据二次处理当前月按照日来做分组（useMemo）
    const dayGroup = useMemo(() => {
        //当前月按照日来做分组数据
       const groupData=_.groupBy(currentMonthList, item => dayjs(item.date).format('YYYY-MM-DD'))
       //得到所有的日期
       const keys=Object.keys(groupData)
        return {
            groupData,
            keys
        }
    }, [currentMonthList])
   

    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={true}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="data">
                        <span className='text'>{currentMonth}月账单</span>
                        <span className={classNames('arrow', visible && 'expand')} onClick={() => setVisible(true)}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className="statistics">
                        <div className="item">
                            <span className="money">{-monthResult.pay}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.total}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    <DatePicker
                        title='记账日期'
                        visible={visible}
                        precision="month"
                        onClose={() => {
                            setVisible(false)
                        }}
                        max={new Date()}
                        onConfirm={val => {
                            dateConfirm(val)
                        }}

                    />

                </div>
                {/* 单日列表统计 */}
                {
                    dayGroup.keys.map(key=>{
                        return <DailyBill key={key} date={key} billList={dayGroup.groupData[key]}/>
                    })
                }
               
            </div>
        </div >
    )
}

export default Month